<template>
  <div>

    <div class="tab-content" v-if="YanZhengMa">
      <div class="verification-box">
        <span style="margin-left: 15px;">身份验证</span><br><br>
        <p style="margin-left: 15px;">验证手机号 (137****8829)，确认是您本人操作</p>
        <el-input v-model="form.phone" placeholder="请输入验证码" style="width: 200px;margin-left: 15px;"></el-input>
        <el-button @click="getVerificationCode" type="text" style="margin-left: 20px;">获取验证码</el-button>
      </div>
      <el-button @click="verify" type="primary" class="verify-button">验证</el-button>
    </div>



    <div v-if="YeMian">
      <el-form ref="form" :model="form" label-width="80px">


        <span>平台类型 </span>
        <el-select v-model="form.region" placeholder="全部" style="width: 150px;">
          <el-option label="中移聚合支付" value="0"></el-option>
          <el-option label="农信聚合支付" value="1"></el-option>
        </el-select>

        <span style="margin-left: 20px;">商户名称: </span>
        <el-input v-model="form.name" placeholder="请输入" style="width: 150px;"></el-input>
        <span style="margin-left: 20px;">商户号: </span>
        <el-input v-model="form.hao" placeholder="请输入" style="width: 150px;"></el-input>
        <span style="margin-left: 20px;">联系电话: </span>
        <el-input v-model="form.hao" placeholder="请输入" style="width: 150px;"></el-input>
        <br><br><br>
        <el-form-item>
          <el-button type="primary" @click="findPage">查询</el-button>
          <el-button type="primary" @click="findPage">新增收款商户</el-button>
          <el-button type="primary" plain @click="findPage">商户号申请</el-button>
        </el-form-item>
      </el-form>
      <el-button type="test" @click="findPage">商户号申请</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序列" width="180">
        </el-table-column>
        <el-table-column prop="xiaoqu" label="小区" width="180">
        </el-table-column>
        <el-table-column prop="pingtai" label="地址">
        </el-table-column>
      </el-table>





    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
      verificationCode: '1',
      form: {},
      YanZhengMa: true,
      YeMian: false,
    };
  },
  methods: {
    getVerificationCode() {
      alert('发送验证码');
    },
    verify() {
      if (this.verificationCode) {
        alert('验证成功！');
        this.YanZhengMa = false;
        this.YeMian = true;
      } else {
        alert('请输入验证码！');
      }
    }
  }
};
</script>

<style scoped>
.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.tabs li {
  float: left;
  border-right: 1px solid #ccc;
}

.tabs li:last-child {
  border-right: none;
}

.tabs li a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.tabs li.active a {
  background-color: #ddd;
}

.tab-content {
  padding: 15px;
  border: 1px solid #ccc;
  min-height: 200px;
  width: 550px;
  height: 250px;
  position: absolute;
  top: 200px;
  left: 30%;

  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}

.verification-box {
  margin-bottom: 20px;
}

.verify-button {
  margin-left: 400px;
  margin-top: 30px;
}
</style>
